<template>
  <!-- 登录页面 -->
  <div>
    <!-- 头部栏 -->
    <!-- <header>
      <i class="iconfont iconfont-fanhui"></i>
      <span>登录</span>
      <i></i>
    </header> -->
    <z-header>登录</z-header>
    <!-- 登录表单 -->
    <div class="from">
      <van-field
        class="ipu-style"
        v-model="username"
        icon-prefix="iconfont"
        :right-icon="iconName"
        placeholder="用户名/邮箱/已验证手机"
        @click-right-icon="cleaUserText"
        @focus="showIcon"
       
      />
      <div class="pwd">
        <van-field
          class="ipu-style ipu-pwd"
          v-model="password"
          icon-prefix="iconfont"
          right-icon="guanbi"
          type="password"
          placeholder="请输入密码"
          @click-right-icon="cleaPwdText"
          ref="pwd"
          v-if="!eye"
        />
        <van-field
          class="ipu-style ipu-pwd"
          v-model="password"
          icon-prefix="iconfont"
          right-icon="guanbi"
          type="text"
          placeholder="请输入密码"
          @click-right-icon="cleaPwdText"
          ref="pwd"
          v-else
        />
        <!-- 眼睛图标 -->
        <i
          class="iconfont"
          :class="eye ? 'iconfont-yanjing_xianshi' : 'iconfont-biyanjing'"
          @click="changeType"
        ></i>
        <span>忘记密码</span>
      </div>
      <div class="login-err">
        <p ref="errMsg"></p>
      </div>
      <van-button
        class="login-btn"
        type="primary"
        size="large"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="submitLogin"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script>
import zHeader from "@/components/common/z-header.vue"

// 登录请求
import { getLogin } from "../../api"
// 引入辅助函数，来设置commit状态state的属性
import { mapMutations } from 'vuex'
// 获取用户信息
// import { getUserInfo } from "../../api"
export default {
  data() {
    return {
      username: "",
      password: "",
      eye: false,
      iconName: ''
    };
  },
  components: {
    zHeader
  },
  methods: {
    ...mapMutations(['setToken']),
    // 输入框聚焦时触发
    showIcon() {
      this.iconName = 'guanbi'
    },
    // 输入框失去焦点触发
    // closureIcon() {
    //   this.iconName = ''
    // },
    cleaUserText() {
      //   清空用户输入框
      // console.log("=====");
      this.username = "";
    },
    cleaPwdText() {
        this.password = ''
    },
    changeType() {
        this.eye = !this.eye
        
    },
  // 登录请求
   submitLogin() {
    //  传递参数和回调函数
     getLogin({username:this.username, password: this.password}, (res) => {
      //  得到token就可以认为登录成功
      //  console.log(res);
      //  判断是否请求成功
      if (res.status == 0 ) {
        // 请求成功, 将token存入vuex中， token可以判断用户是否登录，全局的状态属性
        // 持久化token信息
        this.setToken({token: res.data.token})
        /*
            产生问题：
                持久化的时候是一个耗时操作，立马执行后面的代码，islogin还未成功设置，就跳入页面中，
                随即就会触发路由守卫， 在次进入登录页面
        */ 

      //  登录成功后， 获取用户信息, 放入个人主页面
        // getUserInfo(res => {
        //   console.log('得到用户信息', res);
        //   // 
        // })
        /**
         * 以为这个用户信息，许多页面都需要获取，所以可以放入vuex中进行管理
         * 通过vuex的actives来获取用户数据
         * */ 
        this.$store.dispatch('getInfo')

        // 登录完成后， 获取角标信息
        this.$store.dispatch('getCarData')

        // 登录成功后，跳转到 个人主页
        // this.$router.push('/user')   push是压栈的方式，返回还会到登陆界面
        this.$router.replace('/user')
      }else {
        // console.dir(this.$refs.errMsg);
        this.$refs.errMsg.outerHTML = res.msg
        this.$toast.fail('登录失败')
        // console.log(this);
      }
     })
   }
  },
};
</script>

<style lang="scss" scoped>
// header {
//   position: fixed;
//   top: 0;
//   display: flex;
//   justify-content: space-between;
//   width: 100%;
//   box-sizing: border-box;
//   padding: 20px;
//   font-size: 30px;
//   background-color: #f7f7f7;
//   .iconfont {
//     font-size: 35px;
//   }
//   span {
//     font-size: 30px;
//   }
// }
.from {
  margin-top: 60px;
  padding: 80px 40px 0;
  font-size: 30px;
  .ipu-style {
    font-size: 30px;
    margin-top: 20px;

    padding: 25px 0;
    border-bottom: 1px solid #ccc;
  }
  .pwd {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    .ipu-pwd {
      width: 60%;
    }
    i {
      margin-top: 30px;
      font-size: 50px;
    }
    span {
      margin: 30px 0;
      padding-left: 20px;
      border-left: 1px solid #ccc;
    }
  }
  .login-err {
    padding: 25px 0;
    p {
      height: 50px;
      margin: 0;
    }
  }
  .login-btn {
    height: 100px;
    border-radius: 50px;
  }
}
</style>